<script setup lang="ts">
import { onMounted, ref } from "vue";
// 用tm代替t，因为tm是响应式的而且可以解析对象
const { locale, setLocale, tm } = useI18n();
const seo_title = computed(() => {
  return tm("shop.seo.title");
})
const seo_ogTitle = computed(() => {
  return tm("shop.seo.ogTitle");
})
const seo_description = computed(() => {
  return tm("shop.seo.description");
})
const seo_ogDescription = computed(() => {
  return tm("shop.seo.ogDescription");
})

const routeData = useRoute();

const { $axios } = useNuxtApp();

const swiperData = ref<any>({ imgs: [], name: "", desc: "" });

// 首页数据获取
const fetchSwiperData = async () => {
  try {
    // GET请求
    const { isSuccess, data } = await $axios.get<any>(
      "/getSwiperByType?type=2"
    );

    if (isSuccess) {
      swiperData.value = data;
      // SEO 会根据中英文切换做不同的SEO
      useSeoMeta({
        keywords: swiperData.value.seoKeywords || tm("shop.seo.keywords"),
        title: swiperData.value.seoTitle || seo_title,
        ogTitle: swiperData.value.seoTitle || seo_ogTitle,
        description: swiperData.value.seoDesc || seo_description,
        ogDescription: swiperData.value.seoDesc || seo_ogDescription,
        ogImage: 'https://oss-cdn.tearful.cn/shop/banner/AP_memorial_day_sale_BANNERSv2-01_2048x2048.webp'
      })
    }

    console.log("获取数据成功 => ", swiperData.value);

    // POST请求示例
    // const result = await $axios.post('/users', { name: 'test', email: 'test@example.com' })
  } catch (error) {
    console.error("请求失败", error);
  }
};

// 获取活动
const activityData = ref<any>({});
const activityLoad = ref<boolean>(false);
const fetchActivityData = async () => {
  try {
    activityLoad.value = false;
    // GET请求
    const { code, data } = await $axios.get<any>(
      "/getActivityList?query=&page=1&pageSize=50&type=6&status=1"
    );

    if (code === "200") {
      activityData.value = data.dataList;
      activityLoad.value = true;
    }

    console.log("获取数据成功 => ", activityData.value);

    // POST请求示例
    // const result = await $axios.post('/users', { name: 'test', email: 'test@example.com' })
  } catch (error) {
    console.error("请求失败", error);
  }
};

onMounted(() => {
  // console.log("videos页面接受路由参数query", routeData)
  fetchSwiperData();
  fetchActivityData();
});

/**
 * 卡片组循环
 */
const videos = computed(() => {
  return tm("videos.items");
});

const handleClick = (item: any) => {
  const { origin } = window.location;
  const targetLink = origin + "/activity-detail?id=" + item.hid;
  window.open(targetLink, "_blank");
};
</script>

<template>
  <v-app>
    <v-sheet>
      <v-sheet color="transparent" class="pt-[72px]">
        <banner-image
          :HeadImage="swiperData.imgs[0] ? swiperData.imgs[0].url : ''"
          :HeadLabel="swiperData.name"
          :SubLabel="swiperData.desc"
        />
      </v-sheet>
      <v-sheet
        v-if="activityLoad"
        color="transparent"
        class="py-16"
      >
        <v-sheet color="transparent" max-width="1480px" min-width="320px" style="margin: 0 auto;">
          <div
            v-for="(item, index) in activityData"
            :key="'ac-' + index"
            style="cursor: pointer"
            @click="handleClick(item)"
            class="transition-all duration-300 hover:bg-gray-50 dark:hover:bg-gray-800/50"
          >
            <div 
              class="flex flex-col md:flex-row py-6 md:py-8 px-4"
              :class="(index + 1) % 2 === 0 ? 'md:flex-row-reverse' : ''"
            >
              <div class="w-full md:w-1/2 flex justify-center mb-6 md:mb-0">
                <v-card
                  flat
                  rounded="md"
                  width="100%"
                  max-width="450px"
                  height="332px"
                  class="overflow-hidden shadow-md hover:shadow-lg transition-shadow duration-300"
                >
                  <v-img
                    :src="item.imgurl"
                    :alt="item.name"
                    class="w-full h-full object-cover transition-transform duration-700 hover:scale-105"
                  ></v-img>
                </v-card>
              </div>
              <div class="w-full md:w-1/2 flex items-center justify-center md:pl-8 md:pr-4">
                <v-card
                  flat
                  rounded="0"
                  color="transparent"
                  class="w-full max-w-xl"
                >
                  <div class="text-[#413E3A] space-y-6">
                    <h1 class="font-serif font-semibold 
                              text-[clamp(1.5rem,5vw,2.25rem)] 
                              leading-tight">
                      {{ item.name }}
                    </h1>
                    <div class="text-[clamp(1rem,3vw,1.125rem)] 
                              font-medium 
                              leading-relaxed 
                              text-gray-700 dark:text-gray-300">
                      <p>{{ item.desc }}</p>
                    </div>
                  </div>
                </v-card>
              </div>
            </div>

            <!-- 分隔线，最后一项不显示 -->
            <v-divider 
              v-if="index !== activityData.length - 1" 
              class="my-2 opacity-30"
            ></v-divider>
          </div>
        </v-sheet>
      </v-sheet>
    </v-sheet>
  </v-app>
</template>

<style scoped>
</style>